// 首页
import React, { useState, useEffect } from 'react';
import './app.less';
import { observer } from "mobx-react";
import "./index.less"
import { Card, Spin, Avatar, message, Progress, Modal } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import store from "./model"
import { history, useLocation } from "umi";
import GlobalModel from "@/utils/static"
import { sys } from '@/utils/sys';
import api from '@/utils/api';
// 指纹操作
import FingerApi from "./finger_device/model";
import AllocationApi from './Allocation/model';

export default observer(() => {

    // 设置IP/监听指纹机状态
    useEffect(() => {
        // 设置ip
        api.setIP()
        // 添加关闭当前软件监听事件(避免重复执行)
        if (!store.isAddCloseConfirm) {
            FingerApi.addCloseConfirm()
            store.isAddCloseConfirm = true
        }
        FingerApi.WEB_DEVICE_STATUS()
        // 一直监听指纹机有没有插入（只执行一次）
        if (!store.timer) {
            // 定时检测指纹机状态
            store.timer = setInterval(() => {
                FingerApi.WEB_DEVICE_STATUS()
            }, 5000)
        }
    }, [])

    // 检查指纹机有没有启动 如果启动就开始下载指纹文件到本地
    useEffect(() => {
        if (FingerApi.isServer) {
            store.fingerprintFile() // 下载指纹文件
            store.getDictList() // 获取字典数据
        }
    }, [FingerApi.isServer])

    // 设置窗口大小和位置
    useEffect(() => {
        FingerApi.setWindowSize(800, 600)
        FingerApi.centerWindow()
    }, [])


    // 创建指纹扫描 
    useEffect(() => {
        // 如果已经启动 则不用创建
        let flag = sessionStorage.getItem("isCreateServer")
        if (!flag) {
            FingerApi.createServer()
            sessionStorage.setItem("isCreateServer", "指纹扫描已经启动")
        }
    }, [])

    // 跳转
    function push(item) {
        history.push(item.path)
    }


    let [menu, setMenu] = useState([
        {
            name: "指纹录入",
            picture: require("../assets/images/home1.png"),
            fonstColor: "#1296db",
            path: "/FingerprintEntry"
        },
        {
            name: "TMS方式",
            picture: require("../assets/images/home2.png"),
            fonstColor: "#3accad",
            path: "Allocation"
        },
        {
            name: "其它方式",
            picture: require("../assets/images/home3.png"),
            fonstColor: "#5584ff",
            path: "/Assist"
        },
        {
            name: "基础设置",
            picture: require("../assets/images/home4.png"),
            fonstColor: "#10caf5",
            path: "/tokenIP"
        }
    ])

    return (
        <>
            <Spin tip="登录中···" spinning={store.loading} size="large">
                <div className="home">
                    {/* <div className='home-login' onClick={() => {FingerApi.toggleFullscreen()}}>
                        <Avatar
                            size={64}
                            style={{
                                backgroundColor: '#87d068',
                            }}
                            icon={<UserOutlined />}
                        />
                    </div> */}
                    <div className="home-center">
                        {/* <div className="home-center-head" onClick={(() => { AllocationApi.createPopup({ isfinger: "没有录入指纹" }) })}>xxx医院患者信息管理系统</div> */}
                        <div className="home-center-body">
                            {
                                menu.map((item, i) => {
                                    return (
                                        <Card
                                            key={i}
                                            hoverable
                                            style={{
                                                width: "45%",
                                                height: "45%",
                                                borderRadius: "16px",
                                                background: "#cee0ed",
                                            }}
                                            onClick={() => { push(item) }}
                                        >
                                            <div className='menu'>
                                                <div className='menu-name' style={{ color: item.fonstColor }}>{item.name}</div>
                                                <div className='menu-picture'>
                                                    <img src={item.picture} alt="" />
                                                </div>
                                            </div>
                                        </Card>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </Spin>
            {/* 程序加载进度条 */}
            {
                store.state == 100 ? "" : (
                    <div className='progress' >
                        <div className='progress-box'>
                            <Progress
                                type="circle"
                                percent={store.state}
                                format={(percent) => {
                                    console.log("进度", percent)
                                    if (percent == 55) {
                                        return (
                                            <>
                                                <div> {percent}%</div>
                                                <div style={{ fontSize: "14px" }}>请检查指纹机是否插入</div>
                                            </>
                                        )
                                    } else {
                                        return (
                                            <div> {percent}%</div>
                                        )
                                    }
                                }} />
                        </div>
                    </div>
                )
            }
            {/* 网络错误 */}
            <Modal cancelButtonProps={{ style: { display: "none" } }} title="网络错误" visible={store.network} onOk={FingerApi.closeApp}>
                <p>请检查网络并退出重新进入</p>
            </Modal>
        </>

    );
});
